<template>
  <h1 class="text-base font-semibold leading-7 text-gray-900">
    {{ $t('pageFactoryReset.form.resetOptionsLabel') }}
  </h1>
  <el-form>
    <div class="mb-2 flex items-center text-sm">
      <el-radio-group v-model="resetOption" class="block ml-4">
        <el-row>
          <el-col>
            <el-radio
              class="font-semibold"
              value="resetToDefaults"
              size="large"
            >
              {{ $t('pageFactoryReset.form.resetToDefaultsOptionLabel') }}
            </el-radio>
          </el-col>
          <p>
            {{ $t('pageFactoryReset.form.resetToDefaultsOptionHelperText') }}
          </p>
        </el-row>
      </el-radio-group>
    </div>
    <el-button type="primary" @click="confirmReset()">
      {{ $t('global.action.reset') }}
    </el-button>
  </el-form>

  <factory-reset-dialog
    ref="factoryResetDialogRef"
    :reset-option="resetOption"
  />
</template>

<script setup lang="ts">
import FactoryResetDialog from './FactoryResetDialog.vue';

const resetOption = ref('resetToDefaults');
const factoryResetDialogRef = ref();

const confirmReset = () => {
  factoryResetDialogRef.value.open = true;
};
</script>
